<template>
<uni-shadow-root class="xr-gltf-index"><xr-scene ar-system="modes:Marker" id="xr-scene" @ready="handleReady" @log="handleLog">
  <xr-assets @progress="handleAssetsProgress" @loaded="handleAssetsLoaded">
    <xr-asset-load type="gltf" asset-id="hudie" :src="mp4Url"></xr-asset-load>
  </xr-assets>
  <xr-node>
    <xr-node id="root">
      <xr-node id="trackerNode">
        <xr-ar-tracker mode="Marker" data-id="hudie-img" :src="tpurl" @ar-tracker-switch="handleTrackerSwitch">
              <xr-gltf model="hudie" :rotation="(rotation1)+' '+(rotation2)+' '+(rotation3)" anim-autoplay :scale="(scale1)+' '+(scale2)+' '+(scale3)"></xr-gltf>
        </xr-ar-tracker>
      </xr-node>
    </xr-node>

    <xr-camera id="camera" node-id="camera" clear-color="0.925 0.925 0.925 1" far="2000" background="ar" is-ar-camera>
    </xr-camera>
  </xr-node>
  <xr-node node-id="lights">
    <xr-light type="ambient" color="1 1 1" intensity="0.3"></xr-light>
    <xr-light type="directional" rotation="30 60 0" color="1 1 1" intensity="1"></xr-light>
  </xr-node>
</xr-scene></uni-shadow-root>
</template>

<script>

global['__wxVueOptions'] = {components:{}}

global['__wxRoute'] = 'xr-gltf/index'
// index.js
Component({
	properties: {
		url: {
			type: String,
			value: ''
		},
		mp4Url: {
			type: String,
			value: ''
		},
		scale1:{
			type: Number,
			value: 0
		},
		scale2:{
			type: Number,
			value: 0
		},
		scale3:{
			type: Number,
			value: 0
		},
		rotation1:{
			type: Number,
			value: 0
		},
		rotation2:{
			type: Number,
			value: 0
		},
		rotation3:{
			type: Number,
			value: 0
		}
	},
	data: {},
	methods: {
		handleReady({
			detail
		}) {
			const xrScene = this.scene = detail.value;
			xrScene.event.add('tick', this.handleTick.bind(this));
			console.log('xr-scene', xrScene);
		},
		handleAssetsProgress: function({
			detail
		}) {
			console.log('assets progress', detail.value);
		},
		/*handleTrackerSwitch:function({detail}){
		  const {id, status} = detail
		  console.log("handleTrackerSwitch:"+status);
		},*/
		handleAssetsLoaded: function({
			detail
		}) {
			console.log('assets loaded', detail.value);
			this.setData({
				loaded: true
			});
		},
		handleARReady: function({
			detail
		}) {
			console.log('arReady');
			this.setData({
				arReady: true
			});
		},
		handleTick: function() {
			const xrSystem = wx.getXrFrameSystem();
			const trackerEl = this.scene.getElementById('tracker');
			if (!trackerEl) {
				return;
			}

			const tracker = trackerEl.getComponent(xrSystem.ARTracker);
			if (!tracker.arActive) {
				return
			}

			const position = tracker.getPosition(98, new xrSystem.Vector3(), false);

		},
		async handleShare(event) {
			console.log("sssssssssssssss")
			const {
				clientX,
				clientY
			} = event.touches[0];
			const {
				frameWidth: width,
				frameHeight: height
			} = this.scene;

			// if (clientY / height > 0.7 && clientX / width > 0.7) {
			// 	this.scene.share.captureToFriends(()=>{
			// 		console.log("sssssssss")
			// 	});
			// }
			const options = {
				type: 'jpg',
				quality: 0.7
			};
			//const base64 = this.scene.share.captureToDataURL(options);
			const base64 = await this.scene.share.captureToDataURLAsync(options);
			console.log("ssss", base64)
			// this.scene.share.captureToLocalPath(options, fp => {
			// 		 wx.saveImageToPhotosAlbum({
			// 		        filePath: fp,
			// 		        // 其他参数和回调处理
			// 		      });
			// 	console.log("sssssss",fp)

			// });
		},



	}
})
export default global['__wxComponents']['xr-gltf/index']
</script>
<style platform="mp-weixin">

</style>